<template>
  <div class="edit-name-contanier">
      <van-nav-bar
        title="修改昵称"
        left-text="取消"
        right-text="确认"
        @click-left="onClickLeft"
        @click-right="onClickRight"
        />
        <van-field
        v-model="message"
        rows="2"
        type="textarea"
        maxlength="8"
        placeholder="请输入您的新昵称"
        show-word-limit
        />
  </div>
</template>

<script>
import { updateUserInfo } from 'network/user'
export default {
  name: 'EditName',
  props: {
    isShowEditName: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    // 我在想,用户想修改昵称,应该是直接把输入内容情况,让用户输入新的昵称,然后
    //  取消的话,直接把输入框的内容清空
    onClickLeft () {
      // 更新父组件的isShowEditName
      this.$emit('update:isShowEditName', false)
      // 输入框重置为空
      this.message = ''
    },
    // 判断输入内容是不是空后再发请求
    async onClickRight () {
      if (this.message === '') {
        return this.$toast('老板,输入内容不能为空(⊙o⊙)…')
      }
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      try {
        const res = await updateUserInfo({
          name: this.message
        })
        console.log(res)
        this.$emit('update:isShowEditName', false)
        this.$emit('update-name', this.message)
        this.$toast.success({
          message: '更新成功(＾－＾)V'
        })
        this.message = ''
      } catch (error) {
        console.dir(error)
        this.$toast.fail('(ｷ｀ﾟДﾟ´)!!服务器有点忙')
      }
    }
  }
}
</script>

<style scoped>

</style>
